<template>
  <div class="layout-demo">
    <div>
      <Checkbox v-model:checked="toggle">基础</Checkbox>
      <Checkbox size="large" v-model:checked="toggle">基础</Checkbox>
      <Checkbox size="small" v-model:checked="toggle">基础</Checkbox>
    </div>
    <div>
      <Checkbox disabled v-model:checked="toggle2">disabled</Checkbox>
      <Checkbox size="large" disabled v-model:checked="toggle2">disabled</Checkbox>
      <Checkbox size="small" disabled v-model:checked="toggle2">disabled</Checkbox>
    </div>
    <div>
      <Checkbox readonly v-model:checked="toggle3">readonly</Checkbox>
      <Checkbox size="large" readonly v-model:checked="toggle3">readonly</Checkbox>
      <Checkbox size="small" readonly v-model:checked="toggle3">readonly</Checkbox>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let toggle = ref<Boolean>(false);
let toggle2 = ref<Boolean>(true);
let toggle3 = ref<Boolean>(true);
</script>
<style lang="scss" scoped>
.layout-demo {
  margin-bottom: 20px;
  .t-checkbox-wrapper {
    margin-right: 20px;
  }
}
</style>
